<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <!--  <script src="./lib/vue.js"></script>-->
    <script src="./lib/vue.min.js"></script>
    <link rel="stylesheet"
        href="./lib/vant@2.12.54_lib_index.css">
    <link rel="stylesheet"
        href="./styles/vant.css" />
    <script src="./lib/vant@2.12.54_lib_vant.min.js"></script>
    <script src="./lib/axios-0.18.0.js"></script>
    <script src="./http/request.js"></script>
    <title>代跑跑</title>
    <style>
        .main {
            overflow: scroll;
            height: 85vh;
        }

        .van-tabbar-item__icon {
            font-size: 30px;
        }

        .vocationalWorkContainer {
            margin-top: 15px;
        }

        .vocationalWorkContainer .vocationalWorkItem {
            height: 15vh;
            width: 100%;
            background-size: cover;
            background-position: center;
        }

        .vocationalWorkContainer .van-icon {
            position: absolute;
            color: #fff;
            font-size: 40px;
            top: 50%;
            right: 0;
            transform: translate(0%, -50%);
        }
    </style>
</head>

<body>
    <div id="app">
        <van-nav-bar title="下单"></van-nav-bar>

        <div class="main">
            <van-cell-group inset
                class="vocationalWorkContainer"
                v-for="item in vocationalWorks"
                :key="item.productId">
                <div class="vocationalWorkItem"
                    :style="`background-image: url(./img/${item.vocationalWorkItem}.png);`"
                    @click="toVocationalWork(item.vocationalWorkItem)">
                    <van-icon name="arrow"></van-icon>
                </div>
            </van-cell-group>
        </div>

        <!-- 底层标签页 -->
        <van-tabbar class="tabbar"
            v-model="active"
            @change="onChange">
            <van-tabbar-item icon="wap-home"
                name="home">主页</van-tabbar-item>
            <van-tabbar-item icon="shop"
                name="information">商家</van-tabbar-item>
            <van-tabbar-item icon="thumb-circle"
                name="distribute">下单</van-tabbar-item>
            <van-tabbar-item icon="bars"
                name="order">订单</van-tabbar-item>
            <van-tabbar-item icon="manager"
                name="personalCenter">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</body>
<script>
    var APPID = "wx576478355cd34bb0"
    new Vue({
        el: "#app",
        data() {
            return {
                active: 'distribute', // 控制标签栏的显示
                vocationalWorks: [
                    // {
                    //     productId: 4,
                    //     vocationalWorkItem: 'salesPromotion'
                    // },
                    {
                        productId: 1,
                        vocationalWorkItem: 'packageOrder'
                    },
                    {
                        productId: 2,
                        vocationalWorkItem: 'urgentOrder'
                    },
                    {
                        productId: 3,
                        vocationalWorkItem: 'helpOrder'
                    },
                    // {
                    //     productId: 0,
                    //     vocationalWorkItem: 'watchOrder'
                    // }
                ]
            }
        },
        methods: {
            // 跳转到具体业务
            async toVocationalWork(name) {
                if (name === 'salesPromotion') {
                    const result = await axios({ method: 'GET', url: '/user/home/checkNew' })
                    if (result.code === 1) {
                        location.href = `./components/Activities/${name}.html`
                    } else {
                        this.$toast.fail(result.msg)
                    }
                } else {
                    location.href = `./components/vocationalWorks/${name}.html`
                }
            },
            // Tabbar 跳转其他页面
            onChange(index) {
                if (index === 'home') {
                    location.href = './home.html?flag=0'
                } else {
                    location.href = `./${index}.html`
                }
            },
        },
        mounted() {
        },
    })

</script>

</html>